<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Lightweight functions for developing applications using web components">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{title}}</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/img/logo.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/ficus.webmanifest">
    <meta name="theme-color" content="#54e4e5">
    <!-- component css START -->
    {% set css %}
    {% include "../../node_modules/@ficusjs/styles/dist/css/ficus-globals.css" %}
    {% include "../../node_modules/@ficusjs/styles/dist/css/ficus-utilities.css" %}
    {% include "../../node_modules/@ficusjs/styles/dist/css/ficus-docs.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/custom-elements/dropdown/dropdown.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/custom-elements/navbar/navbar.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/custom-elements/form/form.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/custom-elements/form-input/form-input.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/html/navigation/navigation.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/html/button/button.css" %}
    {% endset %}
    {% if project.environment == "production" %}
      <style>
        {{css | cssmin | safe}}
      </style>
    {% else %}
      <style>
        {{css | safe}}
      </style>
    {% endif %}
    <!-- component css END -->
  </head>
  <body>
    <div class="fd-main-layout">

      <fc-navbar style="width: 100%;">
        <svg class="fu-hidden" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
          <symbol id="menu" viewBox="0 0 48 48">
            <path d="M 5.5 9 A 1.50015 1.50015 0 1 0 5.5 12 L 42.5 12 A 1.50015 1.50015 0 1 0 42.5 9 L 5.5 9 z M 5.5 22.5 A 1.50015 1.50015 0 1 0 5.5 25.5 L 42.5 25.5 A 1.50015 1.50015 0 1 0 42.5 22.5 L 5.5 22.5 z M 5.5 36 A 1.50015 1.50015 0 1 0 5.5 39 L 42.5 39 A 1.50015 1.50015 0 1 0 42.5 36 L 5.5 36 z"/>
          </symbol>
        </svg>
        <nav class="fd-logo">
          <img id="ficus-logo" src="/assets/img/ficus-logo.svg" width="142" height="32" alt="FicusJS Components" style="display: none;">
          <img id="ficus-logo-white" src="/assets/img/ficus-logo-white.svg" width="142" height="32" alt="FicusJS Components">
        </nav>

        <button type="button" class="fc-navbar__toggler" aria-label="Navbar toggle button">
          <svg>
            <use xlink:href="#menu" href="#menu"></use>
          </svg>
        </button>

        <nav class="fc-navbar__collapse">
          <a href="https://github.com/ficusjs" class="fc-navbar__link">GitHub</a>
        </nav>
      </fc-navbar>

      <div class="[ fd-sidebar ] [ fu-spacing-pt-05 fu-spacing-pb-05 fu-spacing-pl-05 fu-spacing-pr-05 fu-lg-spacing-pt-09 fu-lg-spacing-pb-09 fu-lg-spacing-pl-00 fu-lg-spacing-pr-00 ]">
        <details id="sidebar-nav" class="fd-sidebar-details" open>
          <summary class="fc-button">Menu</summary>
          {% include "nav.njk" %}
        </details>
      </div>

      <main class="[ fd-doc-layout-toc ] [ fu-spacing-pl-05 fu-spacing-pr-05 fu-spacing-pt-05 fu-spacing-pb-05 fu-lg-layout-pl-06 fu-lg-layout-pr-06 fu-lg-layout-pt-06 fu-lg-layout-pb-06 fu-flow ]">
        <article class="[ fd-doc-article ] [ fu-flow ]">
          {{ content | safe }}
        </article>
        {% if content | toc %}
        <aside class="[ fd-sticky-aside ]">
          <div class="[ fd-toc ]">
            <span>Table of contents</span>
            {{ content | toc | safe }}
          </div>
        </aside>
        {% endif %}
      </main>

      <footer class="[ fd-footer ]">
        {% include "theme-toggle.njk" %}
      </footer>

    </div>
    <script type="module" src="/assets/js/main.mjs"></script>
    {% serviceWorker %}
  </body>
</html>